<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>必要商城_大牌品质 工厂价格</title>
    <link
      href="http://static.biyao.com/pc/favicon.ico"
      rel="shortcut icon"
      type="image/x-icon"
    />
    <link href="./lib/common.css" rel="stylesheet" type="text/css" />
    <link href="./lib/new.main.css" rel="stylesheet" type="text/css" />
    <link href="./lib/elementUI.css" rel="stylesheet" type="text/css" />
    <link href="./lib/global.css" rel="stylesheet" type="text/css" />
    <link href="./lib/iprHeader.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="./lib/new.category.css" />
  </head>
  <body id="pagebody">
    <div class="header header-index"></div>
    <!-- 导航栏 -->
    <div class="nav nav-index">
      <div class="clearfix">
        <a href="http://www.biyao.com/home/index.html" class="nav-logo"
          ><img src="./lib/logo.png" height="51"
        /></a>
        <div class="nav-category">
          <p><span>全部分类</span><i></i></p>
          <div>
            <ul class="nav-list">
              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=621"
                  >
                    咖啡
                  </a>
                  <span>/</span>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=627"
                  >
                    饮食
                  </a>
                  <span>/</span>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=691"
                  >
                    正餐
                  </a>
                </p>
              </li>
              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=279"
                  >
                    男装
                  </a>
                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=294"
                  >
                    女装
                  </a>
                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=35"
                  >
                    鞋靴
                  </a>
                </p>
              </li>
              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=122"
                  >
                    眼镜
                  </a>
                  <span>/</span>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=339"
                  >
                    内衣配饰
                  </a>
                  <span>/</span>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=39"
                  >
                    运动
                  </a>
                </p>
              </li>
              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=119"
                  >
                    美妆
                  </a>
                  <span>/</span>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=724"
                  >
                    个护
                  </a>
                  <span>/</span>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=391"
                  >
                    母婴
                  </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=652"
                  >
                    生鲜直供
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=51"
                  >
                    餐厨
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=334"
                  >
                    电器
                  </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=153"
                  >
                    箱包
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=223"
                  >
                    数码办公
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=429"
                  >
                    汽配
                  </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=355"
                  >
                    家纺
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=10"
                  >
                    家具
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=369"
                  >
                    家装
                  </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=546"
                  >
                    健康保健
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=685"
                  >
                    宠物
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=816"
                  >
                    礼品
                  </a>
                </p>
              </li>
            </ul>
          </div>
        </div>
        <div class="nav-search">
          <p>
            <input
              type="text"
              id="searchInp"
              placeholder="请输入要搜索的商品"
            /><span id="searchButton"></span>
          </p>
          <ul style="">
            <li>行李箱</li>
            <li>洗面奶</li>
            <li>枕头</li>
            <li>袜子男夏季</li>
            <li>防晒霜</li>
            <li>洗发水</li>
            <li>伞</li>
            <li>香水</li>
            <li>眼霜</li>
            <li>精华</li>
          </ul>
        </div>
        <div class="nav-tab">
          <ul>
            <li><a href="http://www.biyao.com/home/index.html">首页</a></li>
            <li>
              <a href="http://www.biyao.com/classify/newProduct.html"
                >每日上新</a
              >
            </li>
            <li class="border-l"></li>
            <li class="nav-tab-last">
              <div class="hover_text">
                了解必要
                <div class="hover_code gzh">
                  <span
                    >关注必要微信公众号<br />了解你想了解的一切<br />小必姐在此发福利哦</span
                  >
                </div>
              </div>
            </li>
            <li class="nav-tab-last" id="appDownload">下载必要APP</li>
            <li class="border-l"></li>
            <li class="nav-tab-last">
              <div class="hover_text">
                我的必要
                <div class="hover_code app">
                  <span>
                    扫码下载必要app
                    <br />
                    手机用户独享海量权益
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 右边栏 -->
    <ul class="rightBar" style="display: block">
      <li class="toggle"></li>
      <li class="rightBar-xcx-code toggle novice">
        <div class="coupon_red">
          <div class="tis">
            迎新福利<br />
            微信扫码即得
          </div>
          <div class="rightBar-title">15元</div>
          <div class="count-down" data-time="7200000" id="count-down"></div>
        </div>
        <div class="rightBar-ercode"></div>
      </li>

      <li class="rightBar-top" style="display: none"></li>
    </ul>
    <!-- 分享弹框 -->
    <div class="shareCon">
      <div>
        <p>分享<b></b></p>
        <div class="share-main">
          <dl>
            <dt><img class="share-code" src="./lib/ewm.jpg" /></dt>
            <dd>扫一扫，分享给好友！</dd>
          </dl>
        </div>
      </div>
    </div>

    <!-- 搜索商品列表 -->
    <ul class="category-container">
      <li>
        <ul class="supplier-recommen category-list clearfix">
          <!-- 每件搜索商品 -->
          <!-- <li>
					<a><i><img
								src="./lib/CghkFmIuDbOAUFjRAADsxoYlvAQ019_360x360.jpg"></i>
						<div class="supplier">祖玛珑同原料制造商</div>
						<div class="title">【会呼吸的洗发水】风铃草</div>
						<div class="priceBox">
							<div class="price" price="88"><span
									style="color: #F7A701; font-size: 12px; padding-left: 2px;">￥<span
										style="font-size:18px;">88</span></span></div>
							<div class="mack"><span
									style="color:#FB4C81;background:#FFFFFF; border-color:#FB4C81">一起拼</span><span
									style="color:#FFFFFF;background:#AB7FD1; border-color:#AB7FD1">精选</span></div>
						</div>
						<div class="evaluate">653条好评</div>
					</a>
				</li> -->
        </ul>
      </li>
    </ul>
    <script type="text/javascript" src="./lib/jquery-1.8.3.js.下载"></script>
    <script type="text/javascript" src="./lib/jquery.cookie.js.下载"></script>
    <script type="text/javascript" src="./lib/md5.js.下载"></script>
    <script type="text/javascript" src="./lib/masterCommon.js.下载"></script>
    <script
      type="text/javascript"
      src="./lib/jquery.extention.js.下载"
    ></script>
    <script type="text/javascript" src="./lib/common.js.下载"></script>
    <script type="text/javascript" src="./lib/qs.min.js.下载"></script>
    <script type="text/javascript" src="./lib/vue.min.js.下载"></script>
    <script type="text/javascript" src="./lib/elementUI.min.js.下载"></script>
    <script type="text/javascript" src="./lib/utils.js.下载"></script>
    <script src="./lib/smcp.min.js.下载"></script>
    <script src="./lib/dialog.js.下载"></script>
    <script src="./lib/md5.js(1).下载"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 目标: 点击搜索按钮(放大镜), 根据关键词搜索商品并铺设列表
      // 1. 读标签, 找到相关标签
      // 2. 搜索按钮->点击事件
      document.querySelector("#searchButton").addEventListener("click", (e) => {
        // 3. 获取输入框内容
        let searchText = document.querySelector("#searchInp").value;
        // 4. 查看接口文档(其他可用接口->必要商城->获取-搜索结果列表)
        axios({
          url: "http://123.57.109.30:3999/api/searchGoodsList",
          method: "GET",
          params: {
            searchText: searchText,
            page: 1,
            everyNum: 16,
            // 其他2个(接口不要求必须传, 使用后台默认设置的值即可, 也可以自己视需求而定传什么)
          },
        }).then((result) => {
          console.log(result);
          // 5. 把结果铺设到页面上
          let ul = document.querySelector(".category-list");
          ul.innerHTML = result.data.list.data
            .map(
              (obj) => `<li>
					<a><i><img
								src="${obj.imageUrl}"></i>
						<div class="supplier">xxxx制造商</div>
						<div class="title">${obj.goodsName}</div>
						<div class="priceBox">
							<div class="price" price="${obj.goodsPrice}"><span
									style="color: #F7A701; font-size: 12px; padding-left: 2px;">￥<span
										style="font-size:18px;">${obj.goodsPrice}</span></span></div>
							<div class="mack"><span
									style="color:#FB4C81;background:#FFFFFF; border-color:#FB4C81">一起拼</span><span
									style="color:#FFFFFF;background:#AB7FD1; border-color:#AB7FD1">精选</span></div>
						</div>
						<div class="evaluate">${obj.evalNum}条好评</div>
					</a>
				</li>`
            )
            .join("");
        });
      });
    </script>
  </body>
</html>
